<template>
  <div>
    {{reversedTitle}}
    {{reverse()}}
    {{msg}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'hello',
      msg: {
        value: {
          id: 100
        }
      }
    }
  },

  computed: {
    reversedTitle() {
      // 基于依赖缓存
      console.log(0)
      return this.title.split('').reverse().join('')
    }
  },

  methods: {
    // 事件回调，函数的封装
    reverse() {
      console.log(1)
      return this.title.split('').reverse().join('')
    }
  },

  mounted() {
    setTimeout(() => {
      // this.title = 'hello'
      this.msg.value.id = 300
    }, 2000)
  },

  watch: {
    msg: {
      handler(newValue, oldValue) {
        console.log(newValue.value.id)
      },
      immediate: true,
      deep: true
    }
  }
}
</script>

<style lang='stylus' scoped>

</style>